Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br
5o. módulo

Desenvolvimento Web (DWEI5)

AULA 02 - INTRODUÇÃO AOS CONCEITOS DE HTML, CSS, JS

Agenda

  • Apresentação HTML
  • Apresentação CSS
  • Apresentação Javascript
  • Links Interessantes
  • Ferramentas de Desenvolvimento
  • Editores de Textos
  • Estrutura Semântica do HTML5
  • Tags iniciais do HTML
  • Aplicando as propriedades de CSS ao HTML
  • Introdução aos conceitos básicos de CSS
  • CSS: As Propriedades de Cores
  • SEO
  • Anexos: propriedades CSS3, tags HTML (2011)
  • Perguntas

1. Apresentação HTML

  • Significa Hypertext Markup Language.
  • É utilizada para definir como o conteúdo de um determinado documento deve ser exibido pelo navegador.
  • O autor cria, o navegador interpreta e exibe.
  • Pode ter as seguintes as extensões: .html, .htm.
  • Utiliza-se editores de texto ou ferramentas de desenvolvimenro para a criação de páginas da Web.
  • Hipertexto: conjunto de elementos.
  • Elementos podem ser palavras, imagens, vídeos, áudios, documentos etc.

1.2. Navegador Mosaic

  • Em 1989, Tim Bernes-Lee escreveu um sistema chamado World Wide Web.
  • Foi responsável pela criação do primeiro navegador Web, do servidor e das páginas Web.
  • Além de ter escrito as primeiras especificações para URLs, HTTP e HTML.
  • E foi popularizado por Marc Andreessen em 1990.

Figura: Navegador Mosaic 1990
Fonte: Parece pouco intuitivo, mas, na época, era revolucionário (Divulgação: NCSA)

Observação: Acesse Archive.org para navegar pela internet nas páginas estáticas armazenadas desde sua criação.

Para consultar a evolução dos navegadores e tecnologias entre 1990 e 2012, bem como o crescimento de tráfego global da internet, consulte o Gráfico.

1.3. W3C - World Wide Web Consortium

  • Entre 1993 e 1995: surgiram novas versões do HTML —> HTML+, HTML2.0, HTML3.0 (ainda não era considerado um padrão.
  • Em 1994, fundou o consórcio chamado World Wide Web (W3C) no laboratório de ciência da computação do MIT que agrega empresas, órgãos governamentais e organizações independentes, e com objetivos de desenvolver padrões para a criação e a interpretação de conteúdos para a Web.
  • Tinha como objetivo: desenvolver padrões para a criação e interpretação de conteúdos da Web.
  • Em 1997: o grupo de trabalho do W3C, responsável por manter o padrão do código, lançou a versão HTML3.2 como um padrão de linguagem para web.

  • Observações: Para aprofundamento:

    • W3C, consulte W3C, Wiki.
    • Escritórios no mundo, consulte Escritórios.
    • Grupos de trabalho no Brasil, consulte GT.

  • Os padrões HTML5 e CSS do W3C são os pilares tecnológicos sobre os quais todas as páginas Web são construídas.

1.4. WHAT Working Group

  • Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web.
  • O WHATWG foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004.
  • Observações:
    • Para aprofundamento, consulte WHATWG.
  • Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5. Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi incluído no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto.
  • A participação no grupo é livre e você pode se inscrever por meio da página WHATWG-Participation.
  • É possível participar das listas de email por meio da inscrição em Mail.

1.5. O que é um domínio, como registrar

2. Apresentação CSS

  • Significa Cascading Style Sheets.
  • É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
  • Seu benefício é prover a separação entre o formato e o conteúdo de um documento.
  • Quando o HTML foi criado, as propriedades para efetuar a formatação dos documentos eram feitas no próprio código HTML.
  • Desde então, várias tags HTML foram criadas, e a W3C introduziu o conceito de semântica na estrutura, possibilitando separar a formatação.
  • Isto significa que: por exemplo a tag < strong >, que inicialmente só permitia que o texto continue em negrito no HTML e nada mais. Com o conceito de CSS, podemos redefinir esta tag, e formatar o texto com a tag < strong > para ser maiúscula ou um tipo de fonte em específico.
  • O HTML e CSS estão envolvidos há algum tempo.
  • O poder do CSS vem da habilidade e da combinação de regras para diferentes páginas de acordo com os layouts necessários.
  • Observações:
    • Diversas dicas de uso do CSS, consulte CSS-TRICKS.
    • Documentação do Mozilla para o uso do CSS, MDN Web Docs.
    • Status atual da especificação do CSS3, W3C-CSS.

3. Apresentação Javascript (JS)

  • A linguagem de marcação HTML destina-se a estruturar uma página web.
  • O CSS destina-se a formatar o conteúdo das páginas aplicando estilos.
  • A versão anterior ao HTML5, não possuía funcionalidades para adicionar interatividade avançada às páginas.
  • Javascript foi criada pela Netscape em parceria com a Sun Microsystems, com finalidade de fornecer esta interatividade.
    • Primeiro nome foi Mocha.
    • Criador: BRENDAN EICH, NASCIDO EM 1961, nos EUA.
    • Em 1995: foi lançada a primeira versão, Livescript, e em dezembro do mesmo ano, mudou-se para Javascript 1.0.
    • Em 1996: foi lançada juntamente no navegador Netscape 2.0.
    • Foi desenvolvida para rodar no lado do cliente, isto é, a interpretação e o funcionamento dependem de funcionalidades hospedadas no navegador do usuário.
    • Atualmente, é a linguagem mais usada no mundo, por estar presente na maioria dos projetos Web.

3.1. ECMA - EUROPEAN COMPUTER MANUFACTURES ASSOCIATION

  • Em 1996: Para que houvesse a evolução da linguagem, seus criadores se associaram ao ECMA, e passaram a seguir alguns determinados padrões e normativas.
  • O nome Javascript já havia sido patenteado pela SUN Microsystems (atual Oracle).
  • Novo nome foi necessário: junção das palavras ECMA e Javascript —> ECMAScript.
  • Em 2017: ECMAScript 2017, 8a. edição (ES8), lançado em junho de 2017.
  • Em 2018: ECMAScript 2018, 9a. edição (ES9), lançado em junho de 2018.
  • Em 2019: ECMAScript 2019, 10a. edição (ES10), lançado em junho de 2019.
  • Em 2020: ECMAScript 2020, 11a. edição (ES11), lançado em junho de 2020.
  • Em 2021: ECMASCript 2021 já está em desenvolvimento, e será lançado em 2021.

4.1. Tutoriais

  • Tutoriais e Cursos W3C.

4.2. Acessibilidade

4.3. Internacionalização ou I18n

4.4. Guias e Tutoriais

4.5. Fontes e Ícones

4.6. Principais Frameworks CSS

4.7. Pré-Processadores

  • De acordo com Adriel, Wendell (2016), "Pré-processadores CSS3 são linguagens criadas com um único propósito de adicionar funcionalidades legais e criativas para o CSS sem quebrar a compatibilidade entre browsers. Os pré-processadores disponibilizam milhares de funcionalidades".
  • Comparativo entre Sass x Less.
  • Sass.
  • Less.
  • Stylus.

4.8. Diversos

  • Cores, no google digite: [Color Picker].
  • Onde poderemos utilizar tais tags, propriedades, consulte Can I use.
  • Diversos exemplos na prática de tags HTML, consulte Digital Tools.
  • Tags utilizáveis, obsoletas In Motion Hosting.
  • Outras tags HTML5.

5. Ferramentas de Desenvolvimento

  • O Google Lighthouse é uma ferramenta automatizada de código aberto para medir a qualidade das páginas da web. Pode ser executado em qualquer página da web, pública ou exigindo autenticação. O Google Lighthouse audita o desempenho, acessibilidade e otimização de mecanismo de pesquisa de páginas da web. Acesse: Google Lighthouse.
  • Validador de marcação HMTL.
  • Validador de estilo CSS.
  • Validador de i18n.
  • Validador Unificado.
  • Validador de Links quebrados.
  • Validador de acessibilidade de sites, se estão adequados e compatíveis com os Padrões da web.

6. Editores de Textos

7. Estrutura Semântica do HTML5

  • A semântica refere-se ao significado da palavra na linguagem:
    • A tag < b > é negrito e define um estilo, sem significado semântico. Já a tag < strong > tem estilo e significado semântico, indica urgência e seriedade quando o texto é lido por um programa de leitura.
    • A tag < i > insere o estilo itálico. Já a tag < em > tem o significado semântico de enfatizar o conteúdo.
Tag Tipo Descrição
< b > estilo Formata o texto em negrito.
< i > estilo Formata o texto em itálico.
< em > semântico Efatiza o texto, colocando o texto em itálico.
< strong > semântico Dá uma importância ao texto, colocando o texto em negrito.

7.1. HTML Semântico

  • Significado: É o HTML que concentra no significado da informação nas páginas web ao invés de uma simples apresentação visual.
  • Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões.
  • Dessa forma, os desenvolvedores acabavam usando a tag < div > para todas as situações, e criando seus próprios padrões de nomeclaturas através dos atributos id ou class.

7.2. Significado das tags Semânticas

< header >

  • Contém as informações iniciais. É usado para definir o cabeçalho de uma página ou sessão, e pode conter logo, títulos, menu de navegação, campo de busca, etc.

< nav >

  • Contém os links para navegação no documento.

< section >

  • Representa uma sessão do documento.

< article >

  • Representa um artigo do documento.

< aside >

  • Conteúdo à parte do conteúdo principal.
  • Conteúdo referente a informações do autor, direitos autorais, copyright, bloco de navegações ou links relacionados.

Exemplos de layout

Figura: Exemplo1 de layout com as disposições das tags HTML semânticas Fonte: Autoria própria

Figura: Exemplo2 de layout com as disposições das tags HTML semânticas Fonte: Autoria própria

7.3. Tags Iniciais do HTML

Tamanho default da Fonte

  • Tamanho da fonte default na página: 16px.

7.3.1. DOCTYPE

  • O DOCTYPE (não é uma tag) é uma declaração DTD = Document Type Declaration e representa a primeira linha do documento HTML.
  • É um jeito de indicar ao navegador qual é o tipo de documento e garantir que esse documento seja manipulado da mesma maneira em diferentes navegadores, devido ao modo padrão (Standard mode) que é um comportamento descrito pelas especificações HTML e CSS.
  • Nas versões anteriores ao HTML5, a forma de se definir esta declaração seguia umas das três opções indicadas a seguir:

Exemplo HTML 4.01 Strict (Não se utiliza mais)

<!-- HTML 4.01 Strict --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>

Exemplo HTML 4.01 Transitional (Não se utiliza mais)

<!-- HTML 4.01 Transitional --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>

Exemplo HTML 4.01 Frameset (Não se utiliza mais)

<!-- HTML 4.01 Frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  
<html>
    <head>
        <meta charset="utf-8">
        <title> Título da Página </title>
    </head>
    <body>
        ... inserir seu conteúdo aqui ...
    </body>
</html>
  • A partir da liberação da versão HTML5, algumas modificações foram incluídas e facilitaram muito a vida dos desenvolvedores. Uma delas, é a forma de declarar o documento, basta efetuar da forma indicada a seguir.

Exemplo HTML5 e para as futuras versões (É utilizado atualmente)

  • Todo o texto indicado entre <!-- e -- > são comentários de códigos de HTML.
<!-- HTML5 em diante -->
<!DOCTYPE html> 
<html> <!-- Inicio do HTML -->
    <head> <!-- Início do Cabeçalho da Página -->
        <meta charset="utf-8"> <!-- Definição do charset a ser utilizado -->
        <title> Título da Página </title> <!-- Definição do Título da Página -->
    </head>
    <body> <!-- Início do Corpo do Documento -->
        ... inserir seu conteúdo aqui ...
    </body> <!-- Fim do Corpo do Documento -->
</html> <!-- Fim do HTML -->

7.3.2. Tag < meta >

  • Utilizada sempre dentro da tag < head >.
  • Representa vários tipos de dados.
  • E o que são metadados?
    • São informações que descrevem o conteúdo do seu arquivo.
  • E o atributo charset = “utf-8”, para que serve?
    • Serve para indicar o formato de codificação de caracteres utilizado no documento.
    • Exemplos de charset: ASCII, UTF-8, ANSI e ISO-8859-1.
    • O charset UTF-8 é o que usamos na web atual e faz parte de um padrão chamado Unicode. Com ele podemos representar qualquer caractere de qualquer idioma. Ao usar o charset dentro da tag < meta > de nosso arquivo estamos dizendo ao navegador: quando for ler esse arquivo, use as regras do charset UTF-8.

7.3.3. Tag < title >

  • Utilizada sempre dentro da tag < head >.
  • Representa o título da página, o qual será exibido na aba do navegador.

7.3.4. Favicon

  • Podemos adicionar antes do endereço da página do site, um ícone pequeno, conhecido como favicon.
  • Importante: Verifique o local (pasta) corretamente onde está armazenado seu ícone e faça a indicação do caminho em href= " " (Hypertext Reference).
  • Gerando seu próprio Favicon.
  • Consulte o artigo: Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?
  • Consulte também, artigo: The 2020 Guide to FavIcons for Nearly Everyone and Every Browser.
  • Exemplo: 
    <!DOCTYPE html> 
<html> 
  <head> 
      <meta charset="utf-8"> 
      <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <!-- Favicon Inserido no Cabeçalho -->
      <title> Título da Página </title> 
  </head>
  <body> 
      ... inserir seu conteúdo aqui ...
  </body>
</html>

7.3.5. Tags de Títulos

  • As tags de títulos são pré-formatadas em negrito e com quebra de linha.
  • Os tamanhos são distintos, desde o maior < h1 > até o menor, < h6 >.
Medida em:
Tag		 px em
h1 32px 2em
h2 24px 1.5em
h3 20.8px 1.3em
h4 16px 1em
h5 12.8px 0.8em
h6 11.2px 0.7em 
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> Título h1: Seção I </h1>
        <h2> Título h2: Capítulo I </h2>
        <h3> Título h3: Título I </h3>
        <h4> Título h4: Subtítulo I </h4>
        <h5> Título h5: Subtítulo II </h5>
        <h6> Título h6: Subtítulo III </h6>
    </body>
</html>

Saída:

7.3.6. Tags de Conteúdos de Linhas

Tag < p >: Parágrafo

  • De acordo com MDN Web Docs, "o elemento HTML Parágrafo representa um parágrafo do texto. Parágrafos são, geralmente, representados em mídia visual, como bloco de texto que são separados dos blocos adjacente por espaços brancos verticais e/ou recuo de primeira-linha. Parágrafos são elementos em bloco".
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
        <p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
        <p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
    </body>
</html>

Saída:

Tag < div >: Divisão

  • De acordo com MDN Web Docs, "o elemento HTML de Divisão é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como < article > ou < nav >)".
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <div> <strong>Divisão 1</strong>
            <h1> IFSP - Bragança Paulista  </h1>
            <p> O Instituto Federal de São Paulo (IFSP) foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo (ETFSP) e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
            <div> <strong>Divisão 2 - Dentro da Divisão 1</strong>
                <p> Convertido como Instituto pela Lei nº 11.892, o IFSP passou a ter relevância de universidade, destacando-se pela autonomia. Com a mudança, o IFSP passou a destinar 50% das vagas para os cursos técnicos e, no mínimo, 20% das vagas para os cursos de licenciatura, sobretudo nas áreas de Ciências e da Matemática. Complementarmente, continua oferecendo cursos de Formação Inicial e continuada, Tecnologias, Engenharias e Pós-graduação. <p>
                <p> O IFSP é organizado em estrutura multicampi e possui aproximadamente 24 mil alunos matriculados nos 38 campi e mais 4 mil alunos nos 19 polos de educação a distância distribuídos pelo estado de São Paulo. </p>
            </div>
          </div>
    </body>
</html>

Saída:

Tag < strong >: Negrito

  • De acordo com MDN Web Docs, "o elemento HTML em negrito dá uma forte importância ao texto que está sendo destacado com negrito".
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de Escola de Aprendizes Artífices. Durante seus 100 anos de história, também recebeu os nomes de Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong> e Centro Federal de Educação Tecnológica de São Paulo (CEFET-SP), sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
    </body>
</html>

Saída:

Tag < em >: Enfatizar

  • De acordo com MDN Web Docs, "o elemento HTML enfatizador marca o texto que tem ênfase. Ele pode ser aninhado, com cada nível de aninhamento indicando um grau maior de ênfase".
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, com o nome de <em>Escola de Aprendizes Artífices</em>. Durante seus 100 anos de história, também recebeu os nomes de <em>Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong></em> e <em>Centro Federal de Educação Tecnológica de São Paulo</em> <strong>(CEFET-SP)</strong>, sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
    </body>
</html>

Saída:

Tag < sup >: Superior a base

  • De acordo com MDN Web Docs, "o elemento destaca o texto para posicioná-lo acima da linha de base". Exemplo: o uso de um número elevado a outro.
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> Na matemática, ao efetuarmos o cálculo de um número elevado a outro, representamos este cálculo assim: 10<sup>3</sup>, o que significa que estou elevando o número 10 a 3, sendo a mesma coisa que 10 x 10 x 10. </p>
    </body>
</html>

Saída:

Tag < sub >: Inferior a base

  • De acordo com MDN Web Docs, "o elemento destaca o texto para posicioná-lo abaixo da linha de base". Exemplo: a representação do símbolo químico da água H2O, onde o 2 deve ser posicionado abaixo.
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> Na química, o símbolo da água é: H<sub>2</sub>O. </p>
    </body>
</html>

Saída:

  • De acordo com MDN Web Docs, "o elemento HTML hyperlink, ou âncora, cria com o atributo href, uma hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL".
  • É um texto ou imagem que ao ser selecionado, direciona o usuário para:
    • Outra página.
    • Uma parte do texto da própria página (#book).
    • Ou um link local, email.
  • Exemplos:
    • Link para uma página externa: Site
    • Link para um arquivo/página local: Página
    • Link para um elemento da própria página: Elemento
    • Link para um email (será utilizado o software de email do computador): Email
  • Estados do hiperlink:
    • unvisited (azul e subscrito)
    • visited (roxo e subscrito)
    • active (vermelho e subscrito).
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> <a href="https://bra.ifsp.edu.br">IFSP-BRA</a></p>
        <p> <a href="mailto:paulagiancoli@ifsp.edu.br">E-mail Profa.</a></p>
        <p> <a href="tel:+551133956789">Ligar para</a></p>
    </body>
</html>

Saída:

Tag < img >: Imagens

  • De acordo com MDN Web Docs, "o elemento HTML Imagens (or HTML Image Element) representa a inserção de imagem no documento, sendo implementado também pelo HTML5 para uma melhor experiência com o elemento < figure > e < figcaption >".
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> <img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE."></p>
    </body>
</html>

Saída: Ou: quando não localiza a imagem, exibe o conteúdo do atributo alt.

Tag < figure >: Figuras

  • De acordo com MDN Web Docs, "o elemento HTML Figuras representa o conteúdo independente, frequentemente com uma legenda < figcaption >, e é normalmente referido como uma única unidade.
  • Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal. Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal".
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <p>
            <h1> IFSP - Bragança Paulista  </h1>
            <figure>
              <img src="imagens/logoDWE.jpg" alt="A imagem refere-se ao logo da disciplina DWE.">
              <figcaption>Fig.1 - Logo da Disciplina DWE.</figcaption>
            </figure>
        </p>
    </body>
</html>

Saída:

Tag < del >: Riscar

  • De acordo com MDN Web Docs, "o elemento HTML Riscar (ou Elemento HTML de Texto Excluído) representa uma parte do texto que foi excluída de um documento. Este elemento é (não necessariamente) renderizado pelos navegadores com uma linha entre o texto".
<!DOCTYPE html> 
<html> 
    <head> 
        <!-- Omitido para facilitar o entendimento -->
    </head>
    <body> 
        <h1> IFSP - Bragança Paulista  </h1>
        <p> O Instituto Federal de São Paulo <strong>(IFSP)</strong> foi fundado inicialmente em 1909, <del>com o nome de <em>Escola de Aprendizes Artífices</em>. Durante seus 100 anos de história, também recebeu os nomes de <em>Escola Técnica Federal de São Paulo <strong>(ETFSP)</strong></em></del> e <em>Centro Federal de Educação Tecnológica de São Paulo</em> <strong>(CEFET-SP)</strong>, sendo reconhecido pela sociedade paulista por sua excelência no ensino público gratuito de qualidade. </p>
    </body>
</html>

Saída:

Observação:

8. Inserindo o arquivo CSS ao HTML

  • Há duas formas de inserirmos o CSS ao HTML:
      1. Inserindo o código do arquivo de estilos de CSS dentro do próprio HTML, entre as tags de início e fim de cabeçalho < head >, </ head >:
        • Após as tags de título da página dentre do cabeçalho, inserir as tags de início e fim de estilos, utilizando < style >, </ style >.
      1. Criando um arquivo externo, e dentro do HTML, também no < head >, especificar o link para este arquivo.
        • Após as tags de título da página dentre do cabeçalho, inserir as tags < link rel=“stylesheet" href=“caminhodoArquivo/nomeArquivo.css” >.
        • Em seguida, no editor, criar o arquivo com extensão .css no caminho especificado.
<!-- Exemplo 1: Inserindo o arquivo de estilo CSS no próprio HTML -->
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title> Título da Página </title> 
        <style> 
            ... Inserir seu código CSS aqui ...
        </style>
    </head>
    <body> 
        <!-- Omitido para facilitar o entendimento -->
    </body>
</html>

<!-- Exemplo 2: Inserindo o arquivo de estilo CSS como externo ao HTML -->
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title> Título da Página </title> 
        <link rel="stylesheet" href="caminhodoArquivo/nomeArquivo.css">
    </head>
    <body> 
        <!-- Omitido para facilitar o entendimento -->
    </body>
</html>

9. Conceitos Básicos do CSS

9.1 Seletores

  • Para utilizarmos a formatação com CSS, necessitamos de alguns seletores para indicar onde a propriedade será aplicada. Para tal, poderemos utilizar 3 tipos:
    • Selectores de HTML: são as próprias tags de html.
    • Seletores de Classes: são aplicados nas tags de html por meio da propriedade class = " " .
    • Seletores Identificadores: são aplicados nas tags de html por meio da propriedade id = " " .
Formato Tipo de Seletor Aplicado em
a HTML Todas as tags especificadas no HTML.
.minhaClasse Classe Qualquer tag HTML que tenha a Classe especificada.
a.minhaClasse Dependência de Classe Tag HTML especificada que tenha a Classe especificada.
#meuID Identificadores Qualquer tag HTML que tenha o ID especificado.
a#meuID Dependência de Identificadores Tag HTML especificada que tenha o ID especificado.
* Universal Todas as tags HTML. 
/* Exemplo de Arquivo CSS (estilo.css) */
/* Seletores de HTML */
p { 
    color: #ff1493;
}
a {
    background-color: #ff1493;
}

/* Seletores de Classes */
.rodape {
    color: #ff1943;
}
p.rodape {
    color: #ff1943;
}
.cabecalho {
    background-color: blue;
}

/* Seletores de Identificadores */
#texto {
    color: #ff1943;
}
#imagem {
    color: #ff1943;
    background-color: blue;
}
p#texto {
    color: #ff1943;
    background-color: black;
}

10. Propriedade de CSS: Formatação de Cores dos textos

Declaração:

seletor { 
    propriedade: valor;  
}

Exemplo da Propriedade Color:

h1 { 
    color: blue;  
}
  • Utilizando-se:
    • a palavra chave da cor. 
      h1 { 
color: white;  
}
    • a palavra transparent. 
      h1 { 
color: transparent;  
}
    • a cor current. 
      h1 { 
color: currentColor;  
}
    • RGB (Red, Green, Blue) em hexadecimal. 
      h1 { 
color: #fff;  
}
    • RGB (Red, Green, Blue) em decimal. 
      h1 { 
color: rgb(255, 104, 154);  
}
    • RGB (Red, Green, Blue) em decimal com definição de opacidade (varia de 0 a 1). 
      h1 { 
color: rgba(255, 104, 154, 0.5);  
}
    • CMYK em percentagem. 
      h1 { 
color: cmyk(0%, 26%, 99%, 1%);  
}
    • HSL (Hue - matiz, Saturation - saturação, Lightness - brilho).
      • Hue é um grau na roda de cores; 0 (ou 360) é vermelho, 120 é verde, 240 é azul. As variações entre estes valores refletem as diferentes tonalidades.
      • Saturation é um valor percentual; 100% é a cor completa.
      • Lightness é também uma porcentagem; 0% é escuro (preto), 100% é claro (branco) e 50% é a média
        h1 { 
color: hsl(16, 65%, 100%);  
}
    • HSLA com opacidade (varia de 0 a 1).
      h1 { 
color: hsla(16, 65%, 100%, 0.37);  
}

11. Search Engine Optimization (SEO)

13. Anexos: Roadmap, Propriedades CSS3 e Tags HTML5

13.1. Roadmap Front-End

13.2. Lista Propriedades CSS3

  • Os documentos são mais antigos, porém, ao consultá-los verifique se a tag ou propriedade está em uso, ou desuso. Estas listagens servem como um direcional inicial das tags, mas devem sempre verificar se não estão obsoletas.

13.3. Lista Tags HTML5

  • Os documentos são mais antigos, porém, ao consultá-los verifique se a tag ou propriedade está em uso, ou desuso. Estas listagens servem como um direcional inicial das tags, mas devem sempre verificar se não estão obsoletas.

14. Links interessantes para ler nas horas de folga

15. Sugestão de passos a seguir para se tornar um Desenvolvedor Front-End

  • De acordo com o Handbook do Desenvolvedor Front-End:

    1. Domine os conceitos de HTML, CSS, DOM, JavaScript, Domínios, DNS, URLs, HTTP, navegadores e servidores, sites de hospedagem.
    2. Aprenda a linguagem de marcação HTML.
    3. Aprenda como usar a formatação de estilos por meio das propriedades CSS.
    4. Aprenda Javascript.
    5. Aprenda o DOM.
    6. Aprenda os conceitos fundamentais das interfaces de usuários (interação, usabilidade, experiência do usuário, padrões).
    7. Aprenda linhas de comando/CLI.
    8. Aprenda a prática da engenharia de software (design, arquitetura de aplicativos, modelos, Git, testes, monitoramento, automação, qualidade de código, metodologias de desenvolvimento).
    9. Aprenda a utilizar as ferramentas tal como Webpack, React, Mobx.
    10. Aprenda Node.js.

Referências

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

Perguntas

  • Esclareça suas eventuais dúvidas durante as aulas.
  • Ou pelo E-mail: paulagiancoli@ifsp.edu.br.
  • Ou pelo Fórum do componente curricular.

ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.

</div> </div>